import React, { useEffect } from 'react';
import { HStack, Text, View } from 'native-base';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { FasterImageView } from '@candlefinance/faster-image';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { CommonStyle } from '../../../../../common/commonStyle.ts';
import Ionicons from 'react-native-vector-icons/Ionicons';
import RenderingDiscount from '../../../../home/merchantProduct/component/RenderingDiscount.tsx';
import { useSelector } from 'react-redux';
import { RootState } from '../../../../../redux/store.ts';
import Tools from '../../../../../utils/Tools.ts';
import RenderPrice from '../../../../home/merchantProduct/component/RenderPrice.tsx';
import { navigate } from '../../../../../common/navigationService.ts';

interface IProductListItemProps {
  goods: IProductInformation[];
  styleType: number;
}
const HomeProductListItem: React.FC<IProductListItemProps> = ({ goods, styleType }) => {
  const shoppingCart = useSelector((state: RootState) => state.shoppingCart);

  // 前往产品详情界面下单
  const handleGoToProdDetailOrder = (product: IProductInformation) => {
    navigate('productDetails', { product, hasAddedToCart: true });
  };

  // 渲染盒子类型列表
  const renderListBox = (item: IProductInformation, index: number) => {
    const styles = StyleSheet.create({
      list: { alignItems: 'center', marginBottom: 12, width: '48%', borderRadius: 8, overflow: 'hidden' },
      imgBox: { width: '100%', height: 160, overflow: 'hidden', position: 'relative' },
      mask: { position: 'absolute', width: '100%', height: 160, top: 0, backgroundColor: 'rgba(0,0,0,0.1)', zIndex: 9, alignItems: 'center', justifyContent: 'center' },
      bottom: { flex: 1, paddingHorizontal: 8, flexDirection: 'row', flexWrap: 'wrap' },
      top: { flexDirection: 'row', justifyContent: 'space-between', width: '100%' },
      price: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%' },
    });
    return (
      <TouchableOpacity key={index} style={styles.list} onPress={() => navigate('productDetails', { product: item })}>
        <View style={styles.imgBox}>
          <FasterImageView style={{ flex: 1 }} source={{ url: item.mainImage, transitionDuration: 0.3, resizeMode: 'cover', cachePolicy: 'discWithCacheControl', showActivityIndicator: true }} />
          {item.oneIsVideo === 2 && (
            <View style={styles.mask}>
              <AntDesign name={'play'} size={33} />
            </View>
          )}
        </View>
        <View style={styles.bottom}>
          <View style={styles.top}>
            <Text flex={1} numberOfLines={1} fontSize={12}>
              {item.name}
            </Text>
          </View>

          {item.introduce && (
            <Text fontSize={10} numberOfLines={2} color={CommonStyle.lightGray}>
              {item.introduce}
            </Text>
          )}

          <View width={'100%'} my={1}>
            {RenderingDiscount(item, shoppingCart)}
          </View>
          <View style={styles.price}>{RenderPrice(item, shoppingCart)}</View>

          <View width={'100%'} marginTop={2} alignItems={'center'} flexDirection={'row'} justifyContent={'space-between'}>
            {item.visitFlag && (
              <View>
                <Text fontSize={10} borderWidth={0.5} borderColor={CommonStyle.lightGray} borderRadius={4} paddingX={1}>
                  服务上门
                </Text>
              </View>
            )}
            <View>
              {Tools.renderProductValidation(item) <= 2 && (
                <Text paddingX={2} fontSize={13} color={CommonStyle.deepGrey}>
                  {Tools.renderProductValidation(item) === 1 ? '非可售时间' : '已售罄'}
                </Text>
              )}
              {Tools.renderProductValidation(item) === 3 && (
                <TouchableOpacity style={{ backgroundColor: CommonStyle.mainColor, borderRadius: 8 }} onPress={() => handleGoToProdDetailOrder(item)}>
                  <Text paddingX={2} fontSize={13} color={'#fff'}>
                    选规格
                  </Text>
                </TouchableOpacity>
              )}
              {Tools.renderProductValidation(item) === 4 && (
                <TouchableOpacity onPress={() => handleGoToProdDetailOrder(item)}>
                  <Ionicons name={'add-circle'} size={26} color={CommonStyle.mainColor} />
                </TouchableOpacity>
              )}
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  // 渲染列表类型
  const renderList = (item: IProductInformation, index: number) => {
    const styles = StyleSheet.create({
      list: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 },
      imgBox: { width: 100, height: 100, borderRadius: 8, overflow: 'hidden', position: 'relative' },
      mask: { position: 'absolute', width: 100, height: 100, top: 0, backgroundColor: 'rgba(0,0,0,0.1)', zIndex: 9, alignItems: 'center', justifyContent: 'center' },
      right: { flex: 1, paddingHorizontal: 8, height: 100, flexDirection: 'row', flexWrap: 'wrap', alignContent: 'space-between' },
      top: { flexDirection: 'row', justifyContent: 'space-between', width: '100%' },
      price: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%' },
    });
    return (
      <TouchableOpacity key={index} style={styles.list} onPress={() => navigate('productDetails', { product: item })}>
        <View style={styles.imgBox}>
          <FasterImageView style={{ flex: 1 }} source={{ url: item.mainImage, transitionDuration: 0.3, resizeMode: 'cover', cachePolicy: 'discWithCacheControl', showActivityIndicator: true }} />
          {item.oneIsVideo === 2 && (
            <View style={styles.mask}>
              <AntDesign name={'play'} size={33} />
            </View>
          )}
        </View>
        <View style={styles.right}>
          <View style={styles.top}>
            <Text flex={1} numberOfLines={1} fontSize={12}>
              {item.name}
            </Text>
            {item.visitFlag && (
              <View>
                <Text fontSize={10} borderWidth={0.5} borderColor={CommonStyle.lightGray} borderRadius={4} paddingX={1}>
                  服务上门
                </Text>
              </View>
            )}
          </View>
          <View width={'100%'}>
            <Text fontSize={10} numberOfLines={2} color={CommonStyle.lightGray}>
              {item.introduce}
            </Text>
          </View>

          {RenderingDiscount(item, shoppingCart)}
          <View style={styles.price}>
            {RenderPrice(item, shoppingCart)}
            <View>
              {Tools.renderProductValidation(item) <= 2 && (
                <Text paddingX={2} fontSize={13} color={CommonStyle.deepGrey}>
                  {Tools.renderProductValidation(item) === 1 ? '非可售时间' : '已售罄'}
                </Text>
              )}
              {Tools.renderProductValidation(item) === 3 && (
                <TouchableOpacity style={{ backgroundColor: CommonStyle.mainColor, borderRadius: 8 }} onPress={() => handleGoToProdDetailOrder(item)}>
                  <Text paddingX={2} fontSize={13} color={'#fff'}>
                    选规格
                  </Text>
                </TouchableOpacity>
              )}
              {Tools.renderProductValidation(item) === 4 && (
                <TouchableOpacity onPress={() => handleGoToProdDetailOrder(item)}>
                  <Ionicons name={'add-circle'} size={26} color={CommonStyle.mainColor} />
                </TouchableOpacity>
              )}
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <React.Fragment>
      {styleType === 2 && (
        <View style={styles.box}>
          {goods.map((item, index) => {
            return renderListBox(item, index);
          })}
        </View>
      )}
      {styleType === 1 &&
        goods.map((item, index) => {
          return renderList(item, index);
        })}
    </React.Fragment>
  );
};
const styles = StyleSheet.create({
  box: { width: '100%', flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap' },
});

export default HomeProductListItem;
